/**
 * @author cqb 2016-04-05.
 * @module Accordion
 */

const React = require("react");
const ReactDOM = require("react-dom");
const classnames = require("classnames");
const BaseComponent = require("core/BaseComponent");
const shallowEqual = require("utils/shallowEqual");
const PropTypes = React.PropTypes;
const FontIcon = require("FontIcon");
const velocity = require("velocity");
const UUID = require("utils/UUID");
const EnhancedButton = require('internal/EnhancedButton');

/**
 * Item Component
 */
class Item extends BaseComponent{
    constructor(props) {
        super(props);
        this.active = props.open || false;
        this.key = props.identify || UUID.v4();
        this._animating = false;
        this.addState({
            active: props.open || false
        });
    }

    onClick(event){
        if(this._animating){
            return false;
        }
        if(!this.active){
            this.open();
        }else{
            this.collapse();
        }
    }

    /**
     * 打开
     */
    open(){
        this._animating = true;
        let body = ReactDOM.findDOMNode(this.refs.body);
        if(this.props.onOpen){
            this.props.onOpen(this);
        }
        velocity(body, "slideDown", {duration: 300, complete: ()=>{
            this.active = true;
            if(this._isMounted){
                this.setState({
                    active: true
                });
            }
            this._animating = false;
            if(this.props.onOpened){
                this.props.onOpened(this);
            }
        }});
    }

    /**
     * 折叠
     */
    collapse(){
        this._animating = true;
        let body = ReactDOM.findDOMNode(this.refs.body);
        if(this.props.onCollapse){
            this.props.onCollapse(this);
        }
        velocity(body, "slideUp", {duration: 300, complete: ()=>{
            this.active = false;
            if(this._isMounted){
                this.setState({
                    active: false
                });
            }
            this._animating = false;
            if(this.props.onCollapsed){
                this.props.onCollapsed(this);
            }
        }});
    }

    componentWillUnmount(){
        this._isMounted = false;
    }

    componentDidMount(){
        this._isMounted = true;
        this.props.parent.items.push(this);
        if(this.props.open){
            this.open();
        }
    }

    render() {
        let {className, style, icon, title, children} = this.props;

        className = classnames("cm-accordion-item",className, {
            "cm-accordion-item-active": this.state.active
        });
        icon = icon ? <FontIcon className="cm-accordion-item-icon" icon={icon}></FontIcon> : null;
        return (
            <li className={className} style={style}>
                <div className="cm-accordion-item-head" onClick={this.onClick.bind(this)}>{icon}{title}</div>
                <div className="cm-accordion-item-body" ref="body">
                    {children}
                </div>
            </li>
        );
    }
}

/**
 * Accordion 类
 * @class Accordion
 * @constructor
 * @extend BaseComponent
 */
class Accordion extends BaseComponent {
    constructor(props) {
        super(props);

        this.items = [];
        this.lastOpenItem = null;
    }

    /**
     * 根据index索引展开
     * @param index
     */
    activeByIndex(index){
        if(this.items[index]){
            this.items[index].open();
        }
    }

    /**
     * 根据item对象或item的key值打开面板
     * @param  {String/Object} item item对象或item的key值
     * @return {void}
     */
    activeItem(item){
        if(typeof item == "string"){
            item = this.getItem(item);
        }

        if(item){
            item.open();
        }
    }

    /**
     * 获取Item对象
     * @param  {[type]} key [description]
     * @return {[type]}     [description]
     */
    getItem(key){
        for(let i in this.items){
            if(this.items[i].key === key){
                return this.items[i];
            }
        }
        return null;
    }

    /**
     * 展开回调
     * @param item
     */
    onOpen(item){
        if(this.lastOpenItem){
            this.lastOpenItem.collapse();
        }
        this.lastOpenItem = item;

        if(this.props.onOpen){
            this.props.onOpen(item);
        }

        this.emit("open", item);
    }

    /**
     * 折叠回调
     * @param item
     */
    onCollapse(item){
        this.lastOpenItem = null;
        if(this.props.onCollapse){
            this.props.onCollapse(item);
        }
        this.emit("collapse", item);
    }

    renderItems(){
        let children = this.props.children;
        return React.Children.map(children, (child)=>{
            let props = child.props;
            props = Object.assign({}, props, {
                onCollapse: this.onCollapse.bind(this),
                onOpen: this.onOpen.bind(this),
                onCollapsed: this.props.onCollapsed,
                onOpened: this.props.onOpened,
                parent: this
            });

            return React.cloneElement(child, props);
        });
    }

    render(){
        let className = classnames("cm-accordion", this.state.theme, this.props.className,{
          "cm-accordion-bordered": this.props.bordered
        });

        let items = this.renderItems();

        return (
            <div className={className} style={this.props.style}>
                <ul className="cm-accordion-wrap">
                {items}
                </ul>
            </div>
        );
    }
}

Accordion.propTypes = {
    
};

Accordion.Item = Item;

module.exports = Accordion;
